<template>
  <div style="padding-top: 50px">
    <div class="steps-action">
      <div class="steps">
        <div class="list">
          <ul>
            <li v-for="(item, index) in stepAll.step" :key="index" :class="{ 'active': current >= index }">
              {{ getStepNum(index) }} {{ item }}
            </li>
          </ul>
        </div>
        <div class="btn">
          <div class="prev" @click="prev" :class="{ 'active': current !== 0 }">上一步</div>
          <div class="next" @click="next" :class="{ 'active': current !== 2  }"
               v-if="(currentSubstepIndex===0 || currentSubstepIndex===1) || (current !==3  && current !==2 )   ">
            下一步
          </div>
          <div class="complete" :class="{ 'active': current === 3 }" @click="accomplish"
               v-if=" currentSubstepIndex===1 && (current === 3 || current===2) ">完成
          </div>
        </div>
      </div>
      <div class="substeps">
        <div class="list">
          <ul>
            <li
              v-for="(item, index) in stepAll.substep[current]"
              :key="index"
              :class="{ 'active': currentSubstepIndex == index }"
              @click="handleSubClick(index)"
            >
              <div class="info">
                <div class="num">{{ getStepNum(index) }}</div>
                <div class="text">{{ item }}</div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="steps-content">
      <template v-if="current === 0 && currentSubstepIndex === 0">
        <configStation @ok="changStation" :stationId="stationId"/>
      </template>
      <template v-if="current === 0 && currentSubstepIndex === 1">
        <configDevice :stationId="stationId"/>
      </template>
      <template v-if="current === 1 && currentSubstepIndex === 0">
        <configGateway :stationId="stationId"/>
      </template>
      <!--      <template v-if="current === 1 && currentSubstepIndex === 0">
        <configGatewayCfg :stationId="stationId"/>
      </template>-->
      <!--      <template v-if="current === 1 && currentSubstepIndex === 1">
        <configGatewayChannle :stationId="stationId"/>
      </template>-->
      <template v-if="current === 1 && currentSubstepIndex === 1">
        <gatewaySchedule :stationId="stationId" :stationName="stationName"/>
      </template>
      <!--      <template v-if="current === 2 && currentSubstepIndex === 0">
        <configSchedule :stationId="stationId"/>
      </template>-->
      <template v-if="current === 2 && currentSubstepIndex === 0">
        <configSampleCollection :stationId="stationId"/>
      </template>
      <template v-if="current === 2 && currentSubstepIndex === 1">
        <configModel :stationId="stationId"/>
      </template>
      <template v-if="(current === 3 && currentSubstepIndex === 1)">
        <Skit></Skit>
      </template>
    </div>
  </div>
</template>
<script>
import Skit from './config-skit.vue'
import configDevice from './config-device'
import configStation from './config-station'
import configGateway from './config-gateway'
import configGatewayCfg from './config-gateway-cfg'
import configGatewayChannle from './config-gateway-channle'
import configSchedule from './config-schedule'
import configSampleCollection from './config-sample-collection'
import configModel from './config-model'
import gatewaySchedule from './gateway-schedule'

export default {
  components: {
    Skit,
    configStation,
    configDevice,
    configGateway,
    configGatewayCfg,
    configGatewayChannle,
    configSampleCollection,
    configModel,
    gatewaySchedule,
    configSchedule
  },
  data() {
    return {
      stationId: 0,
      stationName: '',
      // 第一级步骤index
      current: 0,
      // 第二级步骤index
      currentSubstepIndex: 0,
      // 用于判断全部步骤是否已经走完
      stepAllIndex: 0,
      // 全部步骤数据
      stepAll: {
        step: ['站内数据配置', '网关数据配置', '算法模型配置'],
        substep: [
          ['站点配置', '设备配置'],
          ['网关配置', '传感器配置'],
          ['模型注册', '模型管理']
        ]
      }
    }
  },
  computed: {
    getStepNum(index) {
      return function (index) {
        return '0' + (parseInt(index) + 1)
      }
    },
    getStepTotal() {
      let total = 0
      for (const item of this.stepAll.substep) {
        total += item.length
      }
      return total - 1
    }
  },
  methods: {
    accomplish() {
      this.current = 3
      this.currentSubstepIndex = 1
    },
    next() {
      if (this.current === 2 && this.currentSubstepIndex === 1) {
        return
      }
      if (this.current < this.stepAll.step.length) {
        if (this.stationId === 0 && this.current === 0) {
          this.$message.error('请先选择站点')
          return
        }
        if (this.currentSubstepIndex === 1) {
          this.current++
          this.stepAllIndex++
          this.currentSubstepIndex--
        } else if (this.currentSubstepIndex === 0) {
          this.currentSubstepIndex++
          this.stepAllIndex === 0
        }

      }
    },
    prev() {
      if (this.current === 0) {
        if (this.currentSubstepIndex === 0) {
          return;
        } else {
          this.currentSubstepIndex--
        }
      }

      if (this.current === 1) {
        if (this.currentSubstepIndex === 0) {
          this.current--
          this.currentSubstepIndex++
        } else {
          this.currentSubstepIndex--
        }
      }

      if (this.current === 2) {
        if (this.currentSubstepIndex === 0) {
          this.current--
          this.currentSubstepIndex++
        } else {
          this.currentSubstepIndex--
        }
      }
    },
    changStation(payload) {
      this.stationId = payload.stationId
      this.stationName = payload.stationName
    },
    handleSubClick(index) {
      if (this.stationId === 0 && this.current === 0) {
        this.$message.error('请先选择站点')
        return
      }
      this.currentSubstepIndex = index
      this.stepAllIndex++
    }
  }
}
</script>
<style scoped lang="scss">
.steps-content {
  margin-top: 16px;
  /*border: 1px solid #e9e9e9;*/
  border-radius: 6px;
  background-color: transparent;
  min-height: 200px;
  color: #fff;
  text-align: center;
}

.steps-action {
  margin-top: 20px;
}

.steps-action .steps, .steps-action .substeps {
  display: flex;
  align-items: center;
  margin-bottom: 2em;
}

.steps-action .steps ul, .steps-action .substeps ul {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}

.steps-action .steps li {
  width: 11.875vw;
  height: 2.91666667vw;
  line-height: 2.91666667vw;
  color: #fff;
  font-size: 0.9375vw;
  text-align: center;
  background: url("~@/assets/img/bg-step1.png") center center no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}

.steps-action .steps li.active {
  background: url("~@/assets/img/bg-step-active2.png") center center no-repeat;
  background-size: 100% 100%;
}

.steps-action .steps li:first-child {
  background: url("~@/assets/img/bg-step-active1.png") center center no-repeat;
  background-size: 100% 100%;
}

.steps .btn {
  display: flex;
  align-items: center;
}

.steps .btn .prev,
.steps .btn .next,
.steps .btn .complete {
  cursor: pointer;
  width: 4.1666667vw;
  height: 1.875vw;
  text-align: center;
  line-height: 1.875vw;
  border-radius: 0.5vw;
  background-color: #0F3234;
  margin: 0 1vw;
  color: #fff;
}

.steps .btn .prev.active,
.steps .btn .next.active,
.steps .btn .complete.active {
  background-color: #1890FF;
}

.steps-action .substeps li {
  position: relative;
  padding-right: 1vw;
  font-size: 0.9375vw;
  color: #fff;
  overflow: hidden;
  cursor: pointer;
}

.steps-action .substeps li::after {
  content: '';
  width: 0.4166667vw;
  height: 0.4166667vw;
  background: url("~@/assets/img/icon-substep.png") center center no-repeat;
  position: absolute;
  top: 50%;
  right: 0.3125vw;
}

.steps-action .substeps li:last-child::after {
  background: none !important;
}

.steps-action .substeps li.active::after {
  background: url("~@/assets/img/icon-substep-active.png") center center no-repeat;
}

.steps-action .substeps li .info {
  display: flex;
  align-items: center;
  min-width: 7.29166667vw;
  padding-right: 0.8vw;
  height: 2vw;
  line-height: 2vw;
  border: 1px solid #0F3234;
  border-radius: 1vw;
}

.steps-action .substeps li .info .num {
  width: 2vw;
  height: 2vw;
  background-color: #0F3234;
  border-radius: 50%;
  margin-right: 0.5vw;
  text-align: center;
}

.steps-action .substeps li.active .info .num {
  background-color: #1890FF;
  border: 1px solid #1890FF;
}

.ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title {
  color: #fff !important;
}

</style>
